// 1. 我们要把插件写在局部作用域之中; 防止变量冲突;
// 2. 在写代码之前加上两个分号;
// 为啥要加分号 : 
// 在这种情况下不加分号就错误了;
/*
(function(){

})()
(function(){

})
*/
// 3. 把jQuery当做局部变量传入进去;
// 1. 可以优化性能; 不用进行两次查找就可以访问到 jQuery 了;
// 2. 放着和别人的 $ 符号冲突;

;;
(function ($) {
  // 开发一个局部方法还是全局方法;

  // 以下两种方法二选一 : 

  // $.extend( $.fn , {
  //       waterFall : function(){

  //       }
  // })

  // 高度列表;
  var height_list = [];
  
  // 定义一个API方法
  $.fn.waterFall = function (options) {
    // 如果上一次的数组不清空，那么下次会沿用之前的数据导致数据失真;
    height_list.length = 0;
    // console.log("waterfall功能被调用，页面上的元素都排列好了");
    // 为什么在操作DOM的时候我们去使用原型方法;
    // this 指向实例对象;
    // console.log(this); //例如：原生中的DOM元素
    // 1. 前四个不动后面的都跟着前四个进行排列;
    // 为了防止出现问题，给options设置一波默认参数;
    options = $.extend({
      max_col: 4
    }, options);
    // 2. 遍历所有元素;
    // 所有的元素其实都放在 this 上;
    // this === 需要排列的元素;

    for (var i = 0; i < this.length; i++) {
      if (i < options.max_col) {
        // 第一排的元素,获取元素的高度作为每一列的基数;
        height_list.push(this.eq(i).height());
      } else {
        // 剩余的元素; 根据高度数组进行排列;
        // 找到数组之中的最小高度;

        // 技巧解释; 这是一个快速找到数组之中最小值的API;
        // 直接使用即可;
        // console.log(height_list) // 里面每次有四个值 求出四个值中最小高度
        var min_height = Math.min.apply(false, height_list);
        // 获取最小值的下标;
        var min_index = height_list.indexOf(min_height);
        // console.log(min_index)
        // 让元素进行拼接;
        // console.log(this.eq(i))
        this.eq(i).offset({
          // 最小下标那一列的left值;
          left: this.eq(min_index).offset().left,
          // 最小高度值;
          top: min_height + 20
        });
        // 改变高度数组;  这里 +20 是 margin 值
        height_list[min_index] += this.eq(i).height() + 20;
      }
    }
  }

})(jQuery);